import React, { Fragment, useState, createRef } from 'react'
import { Button, Modal, Typography } from 'antd';
import ReactNbsp from 'react-nbsp'
import { post } from '../../../../../../ajax/axios'
import { Api } from '../../../../../../ajax/api'
import UpImage, { UpFileResultInterface } from '../../../../../../components/upImage/ecs'

interface PropsInterface {
}

const Decoding = function (props: PropsInterface) {

  const [visible, setVisible] = useState(false)
  const [imageUpRef] = useState(createRef<UpImage>())
  const [result, setResult] = useState('')

  const okBtnClick = () => {
    if(result) {
      setResult('')
      return
    }
    imageUpRef.current!.upImage().then((data: UpFileResultInterface) => {
      post(Api.coding.imageToBase64, {
        imageUrl: data.filepath
      }).then((data: any) => {
        setResult(data)
      })
    })
  }

  return (
    <Fragment>
      <Button size='small' onClick={() => setVisible(true)} type="primary">图片编码</Button>
      <ReactNbsp></ReactNbsp>
      <Modal
        title='图片编码'
        okText={ result ? '清除' : '确定' }
        onOk={okBtnClick}
        destroyOnClose
        visible={visible}
        onCancel={() => setVisible(false)}
      >
        {
          result ?
            <Typography.Paragraph copyable ellipsis>{result}</Typography.Paragraph>
            :
            <UpImage ref={imageUpRef}></UpImage>
        }
      </Modal>
    </Fragment>
  )
}

export default Decoding